<template>
  <div class="home">
    <div class="top-header">
      <h1 class="main-title">欢迎来到仓库管理系统</h1>
      <img src="../images/wz14.jpg" alt="图片" class="header-image" style="width: 1200px;height: 300px;" />
    </div>
    <h2 class="page-title">最新消息</h2>
    <div class="dashboard">
      <!-- 最新公告模块 -->
      <div class="stat-box">
        <h2><img src="../images/最新公告.png" alt="最新公告图标" class="icon" /> 最新公告</h2>
        <div class="stats vertical">
          <div class="stat-item" v-for="announcement in announcements" :key="announcement.id">
            <h3>{{ announcement.title }}</h3>
          </div>
        </div>
      </div>

      <!-- 最新操作模块 -->
      <div class="stat-box">
        <h2><img src="../images/最新操作.png" alt="最新操作图标" class="icon" /> 最新操作</h2>
        <div class="stats horizontal">
          <div class="stat-item" v-for="operation in latestOperations" :key="operation.id">
            <h3>操作类型：{{ operation.actionType }}</h3>
            <p>货物名称：{{ operation.goodsName }}</p>
            <p>数量：{{ operation.quantity }} 件</p>
            <p>仓库名称：{{ operation.warehouseName || '未知仓库' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',
  data() {
    return {
      announcements: [], // 最新公告
      latestOperations: [], // 最新操作
    };
  },
  mounted() {
    this.getLatestAnnouncements();
    this.getLatestOperations();
  },
  methods: {
    // 获取最新公告
    getLatestAnnouncements() {
      axios.get('http://localhost:8080/announcement/latest')
          .then(response => {
            this.announcements = response.data || []; // 如果没有数据，返回空数组
          })
          .catch(error => {
            console.error('Error fetching latest announcements', error);
          });
    },
    // 获取最新3条操作记录
    getLatestOperations() {
      axios.get('http://localhost:8080/record/operations/latest')
          .then(response => {
            this.latestOperations = response.data || []; // 如果没有数据，返回空数组
          })
          .catch(error => {
            console.error('Error fetching latest operations', error);
          });
    },
  }
};
</script>

<style scoped>
.home {
  text-align: center;
  padding: 20px;
}

.top-header {
  margin-bottom: 20px;
}

.main-title {
  font-size: 32px;
}

.page-title {
  font-size: 24px;
  margin-top: 10px;
  text-align: center;
}

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-box {
  background: #f2f2f2;
  padding: 15px; /* 减小内边距，缩小框的大小 */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  height: 200px; /* 确保框的高度根据内容自动调整 */
}

.stat-box h2 {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.stats.horizontal {
  display: flex;
  justify-content: space-between;
}

.stats.vertical {
  display: flex;
  flex-direction: column; /* 项目垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 取消垂直居中，避免过多的留白 */
}

.stats .stat-item {
  text-align: center; /* 让每个条目的文本居中 */
  margin-bottom: 25px; /* 每个条目之间有间距 */
}

.stats .stat-item h3 {
  font-size: 16px;
  margin: 5px 0;
}

ul {
  padding-left: 20px;
}
</style>
